<template>
  <view class="cart-shop">
      <view class="side-a">
        <scroll-view :scroll-y="true" style="height: 100%" :scroll-top="scrollTop" :scroll-with-animation="true">
            <view class="item text-ellipsis__2 side-item" v-for="(item,index) in columns"
                  :key="index"
                  @click="handleSideAction(item,index)"
                  :class="[index===sideCurrentIndex&&'type_active']"
            >
                <text class="text-ellipsis__2">{{item.name}}</text>
                <view class="badge" v-if="item.goodNum">{{ item.goodNum }}</view>
            </view>
        </scroll-view>
      </view>
      <view class="side-b">
        <scroll-view
            id="side_b"
            scroll-y
            class="side-scroll"
            :scroll-with-animation="scrollWithAnimation"
            style="height: 100%"
            :scroll-into-view="intoView"
            @scroll="contentScroll"
        >
            <view :id="`v_${index}`" v-for="(item,index) in data" class="item_b" :key="item.id">
                <view class="side_b_title bg-white">
                    <view class="goods">{{ item.name }}</view>
                    <view class="country">Soup in China</view>
                </view>
                <view class="item" v-for="ite in item.children" :key="ite.id">
                    <view class="img-box">
                        <image :src="ite.logo" class="img"></image>
                    </view>
                    <view class="goods-info">
                        <view class="title">{{ ite.name }}</view>
                        <view class="description">{{ ite.description || "暂时没有介绍哦" }} </view>
                        <!-- <view class="num">月售{{ ite.monthlySales }}</view> -->
                        <view class="price">
                            <view>
                                <text class="item-price">￥{{ ite.price }}</text>
                                <text class="unit">/份</text>
                            </view>
                            <NumerCalculation @change="(val)=>numberCalculationAction(val,ite,item)"/>
							<!-- <u-number-box v-model="ite.goodNum" @change="(val)=>valChange(val,ite,item)"></u-number-box> -->
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
      </view>
  </view>
</template>

<script>
export default {
    props:{
      data:{
          type:Array,
          default:()=>[]
      },
      columns:{
          type:Array,
          default:()=>[]
      },
      // 点击侧边栏 右边是否需要动画
      scrollWithAnimation:{
          type:Boolean,
          default:true
      }
    },
    data() {
        return {
            intoView:'v_0',
            sideCurrentIndex:0,
            scrollTop:0,
            contentHeightArr:[],
            handleSideClick:true,
        }
    },
    mounted(){
        this.getContentHeight()
    },
    methods:{
		// valChange(val,ite,item) {
		//  //    console.log('New value:', val);
		// 	// console.log('ite',ite);
		// 	// console.log('item',item);
		// 	this.$store.dispatch('removeFromCart',ite)
		// 	this.$store.dispatch('addToCart',ite)
		// 	this.$store.dispatch('updateGoodNum',item.id,ite.id,val)
		// 	// console.log('cartShopData',this.$store.getters.cartShopData)
		// 	// console.log('shoppingCart',this.$store.getters.shoppingCart)
		//   },
        numberCalculationAction(val,item,ite){
            this.$emit('numberComputed',val,item,ite)

        },
        getContentHeight(){
            this.getHeight('.item_b').then(res=>{
                res.forEach((item,index)=>{
                    let top = index > 0 ? this.contentHeightArr[index - 1] : 0;
                    top += item.height;
                    this.contentHeightArr.push(top)
                })
            })
        },
        async getHeight(element) {
            return new Promise((resolve) => {
                let view = uni.createSelectorQuery().in(this).selectAll(element);
                view.boundingClientRect(data => {
                    if(!data){
                        setTimeout(()=>{
                            this.getHeight()
                        },10)
                        return
                    }
                    resolve(data)
                }).exec();
            })
        },
        contentScroll(event){
            let scrollTop = event.target.scrollTop
            let index = this.contentHeightArr.findIndex((item)=>{
                return scrollTop<=item
            })
            if(!this.handleSideClick){
                this.sideCurrent = index<0?this.sideCurrent:index;
            }
            this.scrollHeight()
        },
        handleSideAction(item,index){
            this.handleSideClick = true
            this.sideCurrentIndex = index
            this.intoView = `v_${index}`
            this.scrollHeight()
            setTimeout(()=>{
                this.handleSideClick = false
            },300)
        },
        async getWrapSideHeight() {
            return new Promise(resolve => {
                let view = uni.createSelectorQuery().in(this).select(".side-a");
                view.boundingClientRect(data => {
                    resolve(data)
                }).exec();
            })
        },
        async scrollTopTo(OffsetHeight, itemTab) {
            let tabNav = await this.getWrapSideHeight()
            this.scrollTop = OffsetHeight - (tabNav.height - itemTab.height) / 2
        },
        async scrollHeight() {
            let tabs = await this.getHeight(".side-item")
            let itemTab = tabs[this.sideCurrentIndex]
            if (!itemTab) return

            let currentBeforeArr = tabs
                .slice(0, this.sideCurrentIndex)

            let OffsetHeight = currentBeforeArr
                .reduce((total, curr) => {
                    return total + curr.height
                }, 0);
            this.scrollTopTo(OffsetHeight,itemTab)

        },
    }
}
</script>


<style lang="scss" scoped>
.cart-shop{
  display: flex;
  flex: 1;
  overflow: hidden;
}
.side-scroll{
  position: relative;
}
.side_b_title{
    position: sticky;
    top: -2rpx;
    left: 0;
    z-index: 99;
    padding: 10rpx 24rpx;

    background: white;
}
.badge{
    right: -2rpx;
    top: -2rpx;
    background-color: #9E2A22;
    position: absolute;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: center;
    flex-direction: row;
    height: 20px;
    min-width: 20px;
    padding: 0 4px;
    line-height: 18px;
    color: #fff;
    border-radius: 100px;
    border: 1px solid #fff;
    text-align: center;
    font-family: Helvetica Neue,Helvetica,sans-serif;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-size: 12px;
    z-index: 9;
    cursor: pointer;
}
.side-item{
    position: relative;
}
.side-a{
  width: 160rpx;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  .item{
    text-align: center;
    padding: 20rpx 20rpx;
    display: flex;
    font-size: 24rpx;
    justify-content: center;
    align-items: center;
    color: #666666;
  }
  .type_active{
    background: white;
    font-weight: 600;
    color: #000000;
  }
}
.side-b{
    flex: 1;
    background: white;
    padding-bottom: 20rpx;
    box-sizing: border-box;
  .goods{
    font-size: 26rpx;

  }
  .country{
    font-size: 22rpx;
    color: #999999;
  }
  .item{
    padding: 0 24rpx;
    display: flex;
    margin-bottom: 20rpx;
    .img-box{
      width: 180rpx;
      height: 180rpx;
      margin-right: 22rpx;
      .img{
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
    }
    .goods-info{
      flex: 1;
    }
    .title{
      font-size: 26rpx;
      margin-bottom: 8rpx;
      font-weight: bold;
    }
    .num{
      color: #999999;
      font-size: 22rpx;
    }
    .description{
      font-size: 22rpx;
      color: #666666;
      margin-bottom: 16rpx;
    }
    .price{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item-price{
        font-size: 32rpx;
      }
      .unit{
        color: #999999;
        font-size: 22rpx;
      }
    }
  }
}
.text-ellipsis__2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>